<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/font/iconfont.css" />
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./css/list2.css" />
    <link rel="stylesheet" href="./css/index2.css" />
  </head>
  <body>
    <!-- 头部 start-->
    <header id="top">
      <div class="header_top">
        <div class="header_topbar fr">
          <div class="topbar_login">
            <p class="p1">
              <a href="./logon2.html">登录</a>&nbsp;或&nbsp;<a
                href="./regj2.html"
                >注册</a
              >&nbsp;ANTA会员
            </p>
            <p class="p2" style="display: none">
              <a href="javascript:;">欢迎：<span></span></a>
            </p>
          </div>
          <div class="topbar_cart">
            <a href="./cart2.html" class="iconfont icon-gouwuchefill"></a>
          </div>
          <div class="topbar_service">
            <a href="javascript:;" class="iconfont icon-custom-service"></a>
          </div>
          <div class="topbar_en">
            <a href="javascript:;">EN</a>
          </div>
        </div>
      </div>
      <div class="header_bottom">
        <div class="header_logo fl">
          <a href="./index2.html">
            <img src="./img/logo-anta.svg" alt="" width="" />
          </a>
        </div>
        <ul class="header_nav fr">
          <li class="nav_item">
            <a href="./list2.html">冬奥国旗款</a>
          </li>
          <li class="nav_item">
            <a href="javascript:;">男子</a>
            <div class="menu_two">
              <div class="menu_inner">
                <ul class="cate_list">
                  <li><a href="javascript:;">所有鞋类</a></li>
                  <li><a href="javascript:;">运动鞋</a></li>
                  <li><a href="javascript:;">跑鞋</a></li>
                  <li><a href="javascript:;">篮球鞋</a></li>
                  <li><a href="javascript:;">休闲鞋</a></li>
                  <li><a href="javascript:;">板鞋</a></li>
                  <li><a href="javascript:;">户外综训鞋</a></li>
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有服装</a></li>
                  <li><a href="javascript:;">套头卫衣</a></li>
                  <li><a href="javascript:;">外套夹克</a></li>
                  <li><a href="javascript:;">羽绒服/马甲</a></li>
                  <li><a href="javascript:;">短袖T恤</a></li>
                  <li><a href="javascript:;">长裤</a></li>
                  <li><a href="javascript:;">运动裤</a></li>
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有配件</a></li>
                  <li><a href="javascript:;">包类</a></li>
                  <li><a href="javascript:;">运动袜子</a></li>
                </ul>
                <ul class="cate_list" style="border-right: 0">
                  <li><a href="javascript:;">运动项目</a></li>
                  <li><a href="javascript:;">跑步</a></li>
                  <li><a href="javascript:;">篮球</a></li>
                  <li><a href="javascript:;">综训</a></li>
                  <li><a href="javascript:;">生活</a></li>
                  <li><a href="javascript:;">健身</a></li>
                </ul>
              </div>
            </div>
          </li>
          <li class="nav_item">
            <a href="javascript:;">女子</a>
            <div class="menu_two">
              <div class="menu_inner">
                <ul class="cate_list">
                  <li><a href="javascript:;">所有鞋类</a></li>
                  <li><a href="javascript:;">跑鞋</a></li>
                  <li><a href="javascript:;">休闲鞋</a></li>
                  <li><a href="javascript:;">板鞋</a></li>
                  <li><a href="javascript:;">棉鞋</a></li>
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有服装</a></li>
                  <li><a href="javascript:;">羽绒服</a></li>
                  <li><a href="javascript:;">套头卫衣</a></li>
                  <li><a href="javascript:;">羽绒服/马甲</a></li>
                  <li><a href="javascript:;">长裤</a></li>
                  <li><a href="javascript:;">短袖T恤</a></li>
                  <li><a href="javascript:;">运动短裤</a></li>
                </ul>
                <ul class="cate_list" style="border-right: 0">
                  <li><a href="javascript:;">所有配件</a></li>
                  <li><a href="javascript:;">包类</a></li>
                  <li><a href="javascript:;">运动袜类</a></li>
                </ul>
              </div>
            </div>
          </li>
          <li class="nav_item">
            <a href="javascript:;">儿童</a>
            <div class="menu_two">
              <div class="menu_inner">
                <ul class="cate_list">
                  <li><a href="javascript:;">新品上市</a></li>
                  <li><a href="javascript:;">男中大童</a></li>
                  <li><a href="javascript:;">女中大童</a></li>
                  <li><a href="javascript:;">男小童</a></li>
                  <li><a href="javascript:;">女小童</a></li>
                  <li><a href="javascript:;">婴童</a></li>
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有鞋类</a></li>
                  <li><a href="javascript:;">跑鞋</a></li>
                  <li><a href="javascript:;">篮球鞋</a></li>
                  <li><a href="javascript:;">休闲鞋</a></li>
                  <li><a href="javascript:;">板鞋</a></li>
                  <li><a href="javascript:;">足球鞋</a></li>
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有服饰</a></li>
                  <li><a href="javascript:;">套头卫衣</a></li>
                  <li><a href="javascript:;">羽绒服</a></li>
                  <li><a href="javascript:;">短袖T恤</a></li>
                  <li><a href="javascript:;">运动短裤</a></li>
                  <li><a href="javascript:;">长裤</a></li>
                </ul>
                <ul class="cate_list" style="border-right: 0">
                  <li><a href="javascript:;">所有配饰</a></li>
                  <li><a href="javascript:;">包类</a></li>
                </ul>
              </div>
            </div>
          </li>
          <li class="nav_item">
            <a href="javascript:;">安踏儿童</a>
          </li>
          <li class="nav_item">
            <a href="javascript:;">品牌文化</a>
          </li>
          <li class="nav_item">
            <a href="javascript:;">观赏视频</a>
          </li>
          <li class="nav_item">
            <a href="javascript:;">联系我们</a>
          </li>
          <li class="nav_item last_li">
            <div class="nav_search">
              <a
                href="javascript:;"
                class="nav_search_btn iconfont icon-xiangshang"
              ></a>
              <input type="text" class="nav_search_ipt" placeholder="搜索" />
            </div>
          </li>
        </ul>
      </div>
    </header>
    <!-- 头部 end-->
    <!-- 主体 start -->
    <main>
      <div class="list_container">
        <div class="screen_box fl">
          <div class="screen_top">
            <span>筛选</span>
            <a href="javascript:;" class="screen_reset fr">重置</a>
          </div>
          <div class="screen_item">
            <div class="select_type">
              <span>性别</span>
              <span class="arrow fr"></span>
            </div>
            <ul class="two_layer" style="display: block">
              <li><a href="javascript:;">男</a></li>
              <li><a href="javascript:;">女</a></li>
              <li><a href="javascript:;">中</a></li>
              <li><a href="javascript:;">中性</a></li>
            </ul>
          </div>
          <div class="screen_item">
            <div class="select_type">
              <span>大类</span>
              <span class="arrow fr"></span>
            </div>
            <ul class="two_layer">
              <li><a href="javascript:;" class="a_1">服装</a></li>
              <li><a href="javascript:;" class="a_2">配件</a></li>
            </ul>
          </div>
          <div class="screen_item">
            <div class="select_type">
              <span>品类</span>
              <span class="arrow fr"></span>
            </div>
            <ul class="two_layer">
              <li><a href="javascript:;">包类</a></li>
              <li><a href="javascript:;">羽绒服</a></li>
              <li><a href="javascript:;">短T</a></li>
            </ul>
          </div>
          <div class="screen_item">
            <div class="select_type">
              <span>尺码</span>
              <span class="arrow fr"></span>
            </div>
            <ul class="two_layer">
              <li><a href="javascript:;">101</a></li>
              <li><a href="javascript:;">110</a></li>
              <li><a href="javascript:;">120</a></li>
              <li><a href="javascript:;">130</a></li>
              <li><a href="javascript:;">140</a></li>
              <li><a href="javascript:;">150</a></li>
              <li><a href="javascript:;">160</a></li>
              <li><a href="javascript:;">165</a></li>
              <li><a href="javascript:;">170</a></li>
              <li><a href="javascript:;">XS</a></li>
              <li><a href="javascript:;">S</a></li>
              <li><a href="javascript:;">M</a></li>
              <li><a href="javascript:;">L</a></li>
              <li><a href="javascript:;">XL</a></li>
              <li><a href="javascript:;">2XL</a></li>
              <li><a href="javascript:;">3XL</a></li>
              <li><a href="javascript:;">4XL</a></li>
              <li><a href="javascript:;">5XL</a></li>
              <li><a href="javascript:;">均码</a></li>
            </ul>
          </div>
          <div class="screen_item">
            <div class="select_type">
              <span>季节</span>
              <span class="arrow fr"></span>
            </div>
            <ul class="two_layer">
              <li><a href="javascript:;">春季</a></li>
              <li><a href="javascript:;">夏季</a></li>
              <li><a href="javascript:;">秋季</a></li>
              <li><a href="javascript:;">冬季</a></li>
            </ul>
          </div>
          <div class="screen_item">
            <div class="select_type">
              <span>品牌</span>
              <span class="arrow fr"></span>
            </div>
            <ul class="two_layer">
              <li><a href="javascript:;">安踏</a></li>
              <li><a href="javascript:;">安踏儿童</a></li>
            </ul>
          </div>
          <div class="screen_item">
            <div class="select_type">
              <span>年份</span>
              <span class="arrow fr"></span>
            </div>
            <ul class="two_layer">
              <li><a href="javascript:;">2020</a></li>
            </ul>
          </div>
          <div class="screen_item">
            <div class="select_type">
              <span>系列</span>
              <span class="arrow fr"></span>
            </div>
            <ul class="two_layer">
              <li><a href="javascript:;">综训系列</a></li>
              <li><a href="javascript:;">生活系列</a></li>
              <li><a href="javascript:;">跑步系列</a></li>
            </ul>
          </div>
          <div class="screen_item">
            <div class="select_type">
              <span>年龄段</span>
              <span class="arrow fr"></span>
            </div>
            <ul class="two_layer">
              <li><a href="javascript:;">中大童</a></li>
              <li><a href="javascript:;">大童</a></li>
            </ul>
          </div>
        </div>
        <div class="list_wrp">
          <div class="list_main">
            <div class="list_top_l fl">
              <h2>所有商品</h2>
            </div>
            <div class="list_top_r fr">
              <div class="new_sort">
                <a href="javascript:;">新品排序</a>
                <span class="arrow fr" style="left: -33px; top: 27px"></span>
              </div>
            </div>
            <ul class="goods_list fl">
              <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!! -->
              <!-- <li class="goods_item fl">
                <div class="goods_main">
                  <a href="javascript:;" class="goods_img">
                    <img src="./img/list-goods.jpg" alt="" />
                  </a>
                  <a href="javascript:;" class="goods_name"
                    >【安踏冠军系列】安踏男针织运动长裤国旗款冬奥</a
                  >

                  <a href="javascript:;" class="goods_price"
                    ><span>￥499.0</span></a
                  >
                </div>
              </li> -->
              <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
            </ul>
          </div>
        </div>
      </div>
    </main>
    <!-- 主体 end -->
    <!-- 脚部 start -->
    <footer>
      <div class="footer_inner">
        <div class="footer_left fl">
          <img src="./img/footer-anta.svg" alt="" />
        </div>
        <div class="footer_right fr">
          <ul class="links_line">
            <li style="border-left: 0">
              <a href="javascript:;">安踏海外</a>
            </li>
            <li>
              <a href="javascript:;">安踏投资者关系</a>
            </li>
          </ul>
          <div class="footer_copyright">
            <div style="margin-bottom: 6px">
              <span>Copyright(C) 2020 by www.ANTA.com</span>
              <span>©安踏体育用品有限公司版权所有</span>
              <a href="javascript:;">营业执照</a>
              <a href="javascript:;">开户许可证</a>
            </div>
            <div>
              <a href="javascript:;">闽ICP备11020421号-1</a>
              <a href="javascript:;">闽公网安备35058202000423号</a>
            </div>
          </div>
          <ul class="links_line">
            <li style="border-left: 0"><a href="javascript:;">安踏儿童</a></li>
            <li><a href="javascript:;">Fila</a></li>
            <li><a href="javascript:;">Kolon Sport</a></li>
            <li><a href="javascript:;">Descente</a></li>
            <li><a href="javascript:;">Sprandi</a></li>
            <li><a href="javascript:;">Kingkow</a></li>
          </ul>
        </div>
      </div>
    </footer>
    <!-- 脚部 end -->
    <!-- 侧边栏 start -->
    <div class="sidebar">
      <a href="javascript:;" class="goto_top"></a>
      <a href="javascript:;" class="goto_cart"></a>
      <a href="javascript:;" class="goto_kefu"></a>
    </div>
    <!-- 侧边栏 end -->
  </body>
</html>

<script src="./node_modules/_jquery@3.6.0@jquery/dist/jquery.min.js"></script>
<script src="./js/anta.js"></script>
<script>
  // 二级菜单
  $(".nav_item")
    .mouseover(function () {
      $(this).find(".menu_two").show();
    })
    .mouseout(function () {
      $(this).find(".menu_two").hide();
    });
</script>
<script>
  //左侧下拉菜单
  $(".select_type").on("click", function () {
    $(this).next().stop().slideToggle();
  });

  $(function () {
    //1.获取所有商品列表的数据
    getGoodsList();

    getGoodsType();
  });

  function getGoodsType() {
    $.get(
      "./goodsAndShoppingCart/getGoodsType.php",
      function (data) {
        console.log(data);
        $.get(
          "./goodsAndShoppingCart/getGoodsList.php",
          {
            typeId: "002",
          },
          function (data) {
            console.log(data);
            let htmlStr = "";
            $(".a_2").on("click", function () {
              for (let i = 0; i < data.length; i++) {
                htmlStr += `<li class="goods_item fl">
                            <div class="goods_main">
                                <a href="./FM2.html?goodsId=${data[i].goodsId}" class="goods_img">
                                    <img src="${data[i].goodsImg}" alt="">
                                </a>
                                <a href="./FM2.html?goodsId=${data[i].goodsId}" class="goods_name">${data[i].goodsName}</a>
                                <a href="./FM2.html?goodsId=${data[i].goodsId}" class="goods_price"><span>￥${data[i].goodsPrice}.00</span></a>
                            </div>
                        </li>`;
              }
              $(".goods_list").html(htmlStr);
            });
          },
          "json"
        );
        $.get(
          "./goodsAndShoppingCart/getGoodsList.php",
          {
            typeId: "001",
          },
          function (data) {
            console.log(data);
            let htmlStr = "";
            $(".a_1").on("click", function () {
              for (let i = 0; i < data.length; i++) {
                htmlStr += `<li class="goods_item fl">
                            <div class="goods_main">
                                <a href="./FM2.html?goodsId=${data[i].goodsId}" class="goods_img">
                                    <img src="${data[i].goodsImg}" alt="">
                                </a>
                                <a href="./FM2.html?goodsId=${data[i].goodsId}" class="goods_name">${data[i].goodsName}</a>
                                <a href="./FM2.html?goodsId=${data[i].goodsId}" class="goods_price"><span>￥${data[i].goodsPrice}.00</span></a>
                            </div>
                        </li>`;
              }
              $(".goods_list").html(htmlStr);
            });
          },
          "json"
        );
      },
      "json"
    );
  }

  function getGoodsList() {
    $.get(
      "./goodsAndShoppingCart/getGoodsList.php",
      function (data) {
        console.log("data", data);
        let htmlStr = "";
        for (let i = 0; i < data.length; i++) {
          htmlStr += `<li class="goods_item fl">
                            <div class="goods_main">
                                <a href="./FM2.html?goodsId=${data[i].goodsId}" class="goods_img">
                                    <img src="${data[i].goodsImg}" alt="">
                                </a>
                                <a href="./FM2.html?goodsId=${data[i].goodsId}" class="goods_name">${data[i].goodsName}</a>
                                <a href="./FM2.html?goodsId=${data[i].goodsId}" class="goods_price"><span>￥${data[i].goodsPrice}.00</span></a>
                            </div>
                        </li>`;
        }
        $(".goods_list").html(htmlStr);
      },
      "json"
    );
  }
</script>
